<template>
	<view class="setuname">
			<form @submit="formSubmit" @reset="">
				<view class="input_control">
					<input type="text" :value="name"  name="input" maxlength="15"/>
					<view class="save-btn">
						<button form-type="submit" type="primary" hover-class='none'>保存</button>
					</view>
					
				</view>
			</form>
			
	</view>
	
</template>

<script>
	import api from '../../../common/api.js'
	
	export default {
		data() {
			return {
				name:''
			}
		},
		methods:{
			async formSubmit(e) {
				console.log(e.detail.value.input == "");
				if(e.detail.value.input.trim() == "") {
					uni.showToast({
						title:'用户名不能为空',
						icon:'none',
						duration:700
					})
				}else {
					let res = await api.SetUserName(e.detail.value.input)
					res.err === 0 ? uni.$emit('changeavatar'):''
					setTimeout(function() {
						uni.navigateBack({  
							delta: 1  
						});
					}, 500)
				}
				
			}
		},
		
		onLoad(p) {
			this.name = p.name
			
		}
	}
</script>

<style lang="scss" scoped>
	.setuname {
		margin-top: 20px;
		margin-left:20px ;
	}
	.input_control {
		display: flex;
		align-items: center;
		
	}
	input[type="text"] {
	  box-sizing: border-box;
	  font-size:32rpx;
	  height:100rpx;
	  border-radius:4px;
	  border:1px solid #c8cccf;
	  color:#6a6f77;
	  -web-kit-appearance:none;
	  -moz-appearance: none;
	  display:block;
	  outline:0;
		padding: 8rpx;
	  text-decoration:none;
	  width:70%;
	}
	input[type="text"]:focus {
	  border:1px solid #ff7496;
	}

	.save-btn {
		display: flex;
		align-items: center;
		width: 130rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		vertical-align: middle;
		margin: 0 auto;
		button {
			font-size: 32rpx;
			height: 75rpx;
			width: 130rpx;
			line-height: 75rpx;
		}
	}
</style>
